<template>
    <div class="dispatch-container">
        <!-- 搜索和筛选区域 -->
        <el-card class="search-card">
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-input v-model="searchForm.instructionNo" placeholder="指令编号" clearable />
                </el-col>
                <el-col :span="4">
                    <el-select v-model="searchForm.instructionType" placeholder="指令类型" clearable>
                        <el-option label="供水调度" value="供水调度" />
                        <el-option label="设备操作" value="设备操作" />
                        <el-option label="应急处理" value="应急处理" />
                        <el-option label="巡检任务" value="巡检任务" />
                        <el-option label="排水调度" value="排水调度" />
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="searchForm.targetPlant" placeholder="目标厂站" clearable>
                        <el-option label="第一水厂" value="第一水厂" />
                        <el-option label="第二水厂" value="第二水厂" />
                        <el-option label="第三水厂" value="第三水厂" />
                        <el-option label="第四水厂" value="第四水厂" />
                        <el-option label="第五水厂" value="第五水厂" />
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="searchForm.status" placeholder="指令状态" clearable>
                        <el-option label="已完成" value="已完成" />
                        <el-option label="处理中" value="处理中" />
                        <el-option label="待处理" value="待处理" />
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-date-picker v-model="searchForm.dateRange" type="datetimerange" range-separator="至"
                        start-placeholder="开始日期时间" end-placeholder="结束日期时间" value-format="YYYY-MM-DD HH:mm:ss" />
                </el-col>
                <el-col :span="2" class="text-right" @click="showOngoingDialog">
                    <el-badge :value="3">
                        <el-icon :size="20">
                            <Bell />
                        </el-icon>
                    </el-badge>
                </el-col>
            </el-row>
        </el-card>
        <!-- 指令列表表格 -->
        <el-card class="table-card">
            <el-row>
                <el-col :span="12">
                    <div class="tab-bar">
                        <el-radio-group v-model="activeTab" @change="handleTabChange">
                            <el-radio-button label="all">全部指令</el-radio-button>
                            <el-radio-button label="todo">待办指令</el-radio-button>
                            <el-radio-button label="done">已办指令</el-radio-button>
                            <el-radio-button label="approval">我的审批</el-radio-button>
                            <el-radio-button label="application">我的申请</el-radio-button>
                            <el-radio-button label="created">我的创建</el-radio-button>
                        </el-radio-group>
                    </div>
                </el-col>
                <el-col :span="24">
                    <el-button type="primary" @click="showCreateDialog">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        新建指令
                    </el-button>
                </el-col>
            </el-row>
            <el-table class="mt-2" :data="filteredInstructions" border style="width: 100%" v-loading="loading">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="instructionNo" label="指令编号" align="center" />
                <el-table-column prop="title" label="指令标题" align="center" />
                <el-table-column prop="type" label="指令类型" align="center" />
                <el-table-column prop="targetPlant" label="目标厂站" align="center" />
                <el-table-column prop="startTime" label="发起时间" align="center" />
                <el-table-column prop="endTime" label="截止时间" align="center" />
                <el-table-column prop="status" label="状态" align="center">
                    <template #default="{ row }">
                        <el-tag :type="getStatusTag(row.status)">
                            {{ row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="{ row }">
                        <el-button type="text" @click="handleInstruction(row)">{{ getActionText(row.status)
                        }}</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页模块 -->
            <el-pagination class="mt-2" v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
                :page-sizes="[10, 20, 50, 100]" layout="total,sizes, prev, pager, next, jumper" />

        </el-card>

        <!-- 新建指令弹窗 -->
        <el-dialog v-model="createDialog.visible" title="新建调度指令" width="50%">
            <el-form :model="instructionForm" :rules="rules" ref="instructionFormRef" label-width="120px">
                <el-form-item label="指令类型" prop="type">
                    <el-select v-model="instructionForm.type" placeholder="请选择指令类型">
                        <el-option label="供水调度" value="供水调度" />
                        <el-option label="设备操作" value="设备操作" />
                        <el-option label="应急处理" value="应急处理" />
                        <el-option label="巡检任务" value="巡检任务" />
                        <el-option label="排水调度" value="排水调度" />
                    </el-select>
                </el-form-item>
                <el-form-item label="目标厂站" prop="targetPlant">
                    <el-select v-model="instructionForm.targetPlant" placeholder="请选择目标厂站">
                        <el-option label="第一水厂" value="第一水厂" />
                        <el-option label="第二水厂" value="第二水厂" />
                        <el-option label="第三水厂" value="第三水厂" />
                        <el-option label="第四水厂" value="第四水厂" />
                        <el-option label="第五水厂" value="第五水厂" />
                    </el-select>
                </el-form-item>
                <el-form-item label="指令标题" prop="title">
                    <el-input v-model="instructionForm.title" placeholder="请输入指令标题" />
                </el-form-item>
                <el-form-item label="指令内容" prop="content">
                    <el-input v-model="instructionForm.content" type="textarea" :rows="4" placeholder="请输入详细的指令内容"
                        maxlength="500" show-word-limit />
                </el-form-item>
                <el-form-item label="截止时间" prop="endTime">
                    <el-date-picker v-model="instructionForm.endTime" type="datetime" placeholder="选择截止时间"
                        value-format="YYYY-MM-DD HH:mm:ss" />
                </el-form-item>
                <el-form-item label="优先级" prop="priority">
                    <el-select v-model="instructionForm.priority" placeholder="请选择优先级">
                        <el-option label="普通" value="普通" />
                        <el-option label="紧急" value="紧急" />
                        <el-option label="非常紧急" value="非常紧急" />
                    </el-select>
                </el-form-item>
                <el-form-item label="附件上传">
                    <el-upload action="" :limit="5" :file-list="instructionForm.attachments" :on-exceed="handleExceed">
                        <el-button type="primary">
                            <el-icon>
                                <Upload />
                            </el-icon>
                            点击上传
                        </el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                支持上传图片、文档等附件，单个文件不超过10MB
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>

            <template #footer>
                <el-button @click="createDialog.visible = false">取消</el-button>
                <el-button type="primary" @click="submitInstruction">提交指令</el-button>
            </template>
        </el-dialog>

        <!-- 指令详情弹窗 -->
        <el-dialog v-model="detailDialog.visible" :title="detailDialog.title" width="60%">
            <el-row :gutter="20">
                <el-col :span="16">
                    <div class="instruction-content">
                        <h3>指令内容</h3>
                        <p>{{ detailDialog.content }}</p>
                    </div>
                    <div class="operation-records">
                        <h3>处理记录</h3>
                        <el-timeline>
                            <el-timeline-item v-for="(record, index) in detailDialog.records" :key="index"
                                :timestamp="record.time">
                                {{ record.action }} - {{ record.operator }}<br>
                                <span v-if="record.remark">备注: {{ record.remark }}</span>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                    <div class="operation-area" v-if="detailDialog.status !== '已完成'">
                        <h3>操作</h3>
                        <el-form>
                            <el-form-item label="操作类型">
                                <el-select v-model="operationForm.action">
                                    <el-option label="接收指令" value="接收指令" />
                                    <el-option label="开始处理" value="开始处理" />
                                    <el-option label="完成处理" value="完成处理" />
                                    <el-option label="报告进度" value="报告进度" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="备注">
                                <el-input v-model="operationForm.remark" type="textarea" :rows="2"
                                    placeholder="请输入备注信息（可选）" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitOperation">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="basic-info">
                        <h3>基本信息</h3>
                        <el-descriptions :column="1" border>
                            <el-descriptions-item label="指令编号">{{ detailDialog.instructionNo }}</el-descriptions-item>
                            <el-descriptions-item label="指令类型">{{ detailDialog.type }}</el-descriptions-item>
                            <el-descriptions-item label="目标厂站">{{ detailDialog.targetPlant }}</el-descriptions-item>
                            <el-descriptions-item label="发起时间">{{ detailDialog.startTime }}</el-descriptions-item>
                            <el-descriptions-item label="截止时间">{{ detailDialog.endTime }}</el-descriptions-item>
                            <el-descriptions-item label="当前状态">
                                <el-tag :type="getStatusTag(detailDialog.status)">
                                    {{ detailDialog.status }}
                                </el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="优先级">
                                <el-tag
                                    :type="detailDialog.priority === '紧急' ? 'danger' : detailDialog.priority === '非常紧急' ? 'danger' : ''">
                                    {{ detailDialog.priority }}
                                </el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="附件">
                                <div v-for="(file, index) in detailDialog.attachments" :key="index"
                                    class="attachment-item">
                                    <el-link type="primary">{{ file.name }}</el-link>
                                    <span>({{ file.size }})</span>
                                </div>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>

        <!-- 新指令提醒弹窗 -->
        <el-dialog v-model="alertDialog.visible" title="新指令提醒" width="40%" :show-close="false">
            <div class="alert-content">
                <h3>{{ alertDialog.title }}</h3>
                <p>{{ alertDialog.content }}</p>
                <div class="alert-info">
                    <p><strong>指令编号:</strong> {{ alertDialog.instructionNo }}</p>
                    <p><strong>目标厂站:</strong> {{ alertDialog.targetPlant }}</p>
                    <p><strong>截止时间:</strong> {{ alertDialog.endTime }}</p>
                </div>
            </div>
            <template #footer>
                <el-button @click="handleLater">稍后处理</el-button>
                <el-button type="primary" @click="handleNow">立即处理</el-button>
            </template>
        </el-dialog>

        <!-- 进行中的指令弹窗 -->
        <el-dialog v-model="ongoingDialog.visible" title="进行中的指令" width="50%">
            <div class="ongoing-header">
                <el-button type="text" @click="markAllAsRead">
                    <el-icon>
                        <CircleCheck />
                    </el-icon>
                    全部标记为已读
                </el-button>
            </div>

            <el-table :data="ongoingInstructions" border style="width: 100%">
                <el-table-column prop="instructionNo" label="指令编号" width="180" />
                <el-table-column prop="title" label="指令标题" />
                <el-table-column prop="type" label="指令类型" width="120" />
                <el-table-column prop="targetPlant" label="目标厂站" width="120" />
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="{ row }">
                        <el-tag :type="getStatusTag(row.status)">
                            {{ row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template #default="{ row }">
                        <el-button type="text" @click="handleInstruction(row)">处理</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { Bell, Plus, Upload } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索表单
const searchForm = reactive({
    instructionNo: '',
    instructionType: '',
    targetPlant: '',
    status: '',
    dateRange: []
})

// 活动标签
const activeTab = ref('all')

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const loading = ref(false)

// 指令列表数据
const instructions = ref([
    {
        id: 1,
        instructionNo: 'IN-20230501-001',
        title: '第一水厂供水压力调整',
        type: '供水调度',
        targetPlant: '第一水厂',
        startTime: '2023-05-01 09:15:23',
        endTime: '2023-05-01 12:00:00',
        status: '已完成',
        priority: '普通',
        content: '调整第一水厂供水压力至0.35MPa，确保管网压力稳定。',
        attachments: [],
        records: [
            {
                time: '2023-05-01 09:20:00',
                action: '指令已发送',
                operator: '调度员 张明'
            },
            {
                time: '2023-05-01 09:25:15',
                action: '已接收指令',
                operator: '厂站操作员 李强'
            },
            {
                time: '2023-05-01 10:30:45',
                action: '开始处理',
                operator: '厂站操作员 李强',
                remark: '开始调整压力参数'
            },
            {
                time: '2023-05-01 11:45:30',
                action: '完成处理',
                operator: '厂站操作员 李强',
                remark: '压力已调整至0.35MPa，系统运行正常'
            }
        ]
    },
    {
        id: 2,
        instructionNo: 'IN-20230502-002',
        title: '第二水厂设备检修',
        type: '设备操作',
        targetPlant: '第二水厂',
        startTime: '2023-05-02 14:30:10',
        endTime: '2023-05-03 09:00:00',
        status: '处理中',
        priority: '紧急',
        content: '第二水厂2号水泵运行异常，请立即停机检修。检修内容包括：1.检查电机轴承状态；2.测量电机绝缘电阻；3.检查联轴器对中情况。检修完成后需进行试运行，确认无异常后方可投入正常使用。',
        attachments: [
            { name: '设备异常记录.xlsx', size: '350KB' }
        ],
        records: [
            {
                time: '2023-05-02 14:35:22',
                action: '指令已发送',
                operator: '调度员 王芳'
            },
            {
                time: '2023-05-02 15:10:05',
                action: '已接收指令',
                operator: '厂站操作员 陈强',
                remark: '已停机并开始检修工作'
            }
        ]
    },
    {
        id: 3,
        instructionNo: 'IN-20230503-003',
        title: '第三水厂水质异常处理',
        type: '应急处理',
        targetPlant: '第三水厂',
        startTime: '2023-05-03 08:45:30',
        endTime: '2023-05-03 12:00:00',
        status: '待处理',
        priority: '非常紧急',
        content: '第三水厂出水浊度异常升高，请立即启动应急预案：1.增加混凝剂投加量；2.加强沉淀池排泥；3.增加过滤反冲洗频率；4.每小时取样检测水质指标。',
        attachments: [
            { name: '水质检测报告.pdf', size: '1.2MB' },
            { name: '应急预案.docx', size: '450KB' }
        ],
        records: [
            {
                time: '2023-05-03 08:50:15',
                action: '指令已发送',
                operator: '调度员 李娜',
                remark: '请尽快处理'
            }
        ]
    },
    {
        id: 4,
        instructionNo: 'IN-20230504-004',
        title: '第四水厂日常巡检',
        type: '巡检任务',
        targetPlant: '第四水厂',
        startTime: '2023-05-04 09:00:00',
        endTime: '2023-05-04 16:00:00',
        status: '待处理',
        priority: '普通',
        content: '按照日常巡检计划对第四水厂进行全面巡检，重点检查：1.加药系统运行状态；2.滤池反冲洗效果；3.清水池水位；4.配电室设备温度。',
        attachments: [],
        records: [
            {
                time: '2023-05-04 09:05:18',
                action: '指令已发送',
                operator: '调度员 赵伟'
            }
        ]
    },
    {
        id: 5,
        instructionNo: 'IN-20230505-005',
        title: '第五水厂排水调度',
        type: '排水调度',
        targetPlant: '第五水厂',
        startTime: '2023-05-05 10:30:45',
        endTime: '2023-05-06 08:00:00',
        status: '处理中',
        priority: '紧急',
        content: '根据气象预报，未来24小时将有强降雨，请做好第五水厂排水系统准备工作：1.检查排水泵运行状态；2.清理排水口杂物；3.降低清水池水位至警戒线以下。',
        attachments: [],
        records: [
            {
                time: '2023-05-05 10:35:20',
                action: '指令已发送',
                operator: '调度员 孙丽'
            },
            {
                time: '2023-05-05 11:15:30',
                action: '已接收指令',
                operator: '厂站操作员 王刚',
                remark: '开始排水系统检查'
            }
        ]
    },
    {
        id: 6,
        instructionNo: 'IN-20230506-006',
        title: '第一水厂设备故障',
        type: '应急处理',
        targetPlant: '第一水厂',
        startTime: '2023-05-06 12:26:42',
        endTime: '2023-05-06 10:00:00',
        status: '待处理',
        priority: '非常紧急',
        content: '第一水厂1号水泵出现严重故障，请立即前往处理。处理过程中需注意安全，并实时向调度中心报告处理进展。',
        attachments: [],
        records: [
            {
                time: '2023-05-06 12:30:00',
                action: '指令已发送',
                operator: '调度员 张明'
            }
        ]
    }
])
const ongoingInstructions = computed(() => {
  return instructions.value.filter(item => 
    item.status === '处理中' || item.status === '待处理'
  )
})
// 新建指令表单
const instructionForm = reactive({
    type: '',
    targetPlant: '',
    title: '',
    content: '',
    endTime: '',
    priority: '普通',
    attachments: []
})
// 弹窗控制
const ongoingDialog = reactive({
  visible: false
})
const showOngoingDialog = () => {
  ongoingDialog.visible = true
}

const markAllAsRead = () => {
  ElMessage.success('已标记所有进行中指令为已读')
  ongoingDialog.visible = false
}

// 表单验证规则
const rules = reactive({
    type: [{ required: true, message: '请选择指令类型', trigger: 'change' }],
    targetPlant: [{ required: true, message: '请选择目标厂站', trigger: 'change' }],
    title: [{ required: true, message: '请输入指令标题', trigger: 'blur' }],
    content: [{ required: true, message: '请输入指令内容', trigger: 'blur' }],
    endTime: [{ required: true, message: '请选择截止时间', trigger: 'change' }]
})

const instructionFormRef = ref()

// 操作表单
const operationForm = reactive({
    action: '',
    remark: ''
})

// 弹窗控制
const createDialog = reactive({
    visible: false
})

const detailDialog = reactive({
    visible: false,
    title: '',
    instructionNo: '',
    type: '',
    targetPlant: '',
    startTime: '',
    endTime: '',
    status: '',
    priority: '',
    content: '',
    attachments: [],
    records: []
})

const alertDialog = reactive({
    visible: false,
    title: '',
    instructionNo: '',
    targetPlant: '',
    endTime: '',
    content: ''
})

// 计算属性
const filteredInstructions = computed(() => {
    let result = instructions.value

    // 根据活动标签筛选
    if (activeTab.value === 'todo') {
        result = result.filter(item => item.status === '待处理')
    } else if (activeTab.value === 'done') {
        result = result.filter(item => item.status === '已完成')
    } else if (activeTab.value === 'approval') {
        // 模拟审批数据
        result = result.filter(item => item.type === '应急处理' || item.priority === '非常紧急')
    } else if (activeTab.value === 'application') {
        // 模拟申请数据
        result = result.filter(item => item.type === '设备操作' || item.type === '巡检任务')
    } else if (activeTab.value === 'created') {
        // 模拟创建数据
        result = result.filter(item => item.records[0].operator.includes('张明') || item.records[0].operator.includes('王芳'))
    }

    // 根据搜索条件筛选
    if (searchForm.instructionNo) {
        result = result.filter(item => item.instructionNo.includes(searchForm.instructionNo))
    }
    if (searchForm.instructionType) {
        result = result.filter(item => item.type === searchForm.instructionType)
    }
    if (searchForm.targetPlant) {
        result = result.filter(item => item.targetPlant === searchForm.targetPlant)
    }
    if (searchForm.status) {
        result = result.filter(item => item.status === searchForm.status)
    }
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
        const [start, end] = searchForm.dateRange
        result = result.filter(item => {
            return item.startTime >= start && item.startTime <= end
        })
    }

    total.value = result.length
    return result.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
})

// 方法
const handleTabChange = (tab) => {
    currentPage.value = 1
}

const showCreateDialog = () => {
    createDialog.visible = true
    Object.assign(instructionForm, {
        type: '',
        targetPlant: '',
        title: '',
        content: '',
        endTime: '',
        priority: '普通',
        attachments: []
    })
}

const submitInstruction = () => {
    instructionFormRef.value.validate((valid) => {
        if (valid) {
            // 生成新的指令编号
            const now = new Date()
            const year = now.getFullYear()
            const month = String(now.getMonth() + 1).padStart(2, '0')
            const day = String(now.getDate()).padStart(2, '0')
            const instructionNo = `IN-${year}${month}${day}-${String(instructions.value.length + 1).padStart(3, '0')}`

            // 创建新指令
            const newInstruction = {
                id: instructions.value.length + 1,
                instructionNo,
                title: instructionForm.title,
                type: instructionForm.type,
                targetPlant: instructionForm.targetPlant,
                startTime: now.toISOString().replace('T', ' ').substring(0, 19),
                endTime: instructionForm.endTime,
                status: '待处理',
                priority: instructionForm.priority,
                content: instructionForm.content,
                attachments: [...instructionForm.attachments],
                records: [
                    {
                        time: now.toISOString().replace('T', ' ').substring(0, 19),
                        action: '指令已发送',
                        operator: '当前用户'
                    }
                ]
            }

            instructions.value.unshift(newInstruction)
            createDialog.visible = false
            ElMessage.success('指令创建成功')

            // 如果是紧急指令，显示提醒
            if (instructionForm.priority === '紧急' || instructionForm.priority === '非常紧急') {
                showAlertDialog(newInstruction)
            }
        }
    })
}

const handleInstruction = (row) => {
    detailDialog.visible = true
    detailDialog.title = row.title
    detailDialog.instructionNo = row.instructionNo
    detailDialog.type = row.type
    detailDialog.targetPlant = row.targetPlant
    detailDialog.startTime = row.startTime
    detailDialog.endTime = row.endTime
    detailDialog.status = row.status
    detailDialog.priority = row.priority
    detailDialog.content = row.content
    detailDialog.attachments = row.attachments
    detailDialog.records = row.records
}

const submitOperation = () => {
    if (!operationForm.action) {
        ElMessage.warning('请选择操作类型')
        return
    }

    const now = new Date().toISOString().replace('T', ' ').substring(0, 19)
    const record = {
        time: now,
        action: operationForm.action,
        operator: '当前用户',
        remark: operationForm.remark
    }

    // 更新指令状态
    const instruction = instructions.value.find(item => item.instructionNo === detailDialog.instructionNo)
    if (instruction) {
        instruction.records.push(record)

        if (operationForm.action === '完成处理') {
            instruction.status = '已完成'
            detailDialog.status = '已完成'
        } else if (operationForm.action === '开始处理') {
            instruction.status = '处理中'
            detailDialog.status = '处理中'
        }

        ElMessage.success('操作已提交')
        operationForm.action = ''
        operationForm.remark = ''
    }
}

const handleExceed = () => {
    ElMessage.warning('最多上传5个附件')
}

const getStatusTag = (status) => {
    switch (status) {
        case '已完成': return 'success'
        case '处理中': return 'warning'
        case '待处理': return 'danger'
        default: return ''
    }
}

const getActionText = (status) => {
    switch (status) {
        case '已完成': return '查看'
        case '处理中': return '处理'
        case '待处理': return '处理'
        default: return '查看'
    }
}

const showAlertDialog = (instruction) => {
    alertDialog.visible = true
    alertDialog.title = instruction.title
    alertDialog.instructionNo = instruction.instructionNo
    alertDialog.targetPlant = instruction.targetPlant
    alertDialog.endTime = instruction.endTime
    alertDialog.content = instruction.content
}

const handleNow = () => {
    alertDialog.visible = false
    const instruction = instructions.value.find(item => item.instructionNo === alertDialog.instructionNo)
    if (instruction) {
        handleInstruction(instruction)
    }
}

const handleLater = () => {
    alertDialog.visible = false
    ElMessage.info('您可以选择稍后在指令列表中处理该指令')
}

// 生命周期钩子
onMounted(() => {
    total.value = instructions.value.length
})
</script>

<style scoped>
.dispatch-container {
    padding: 20px;
}

.header {
    margin-bottom: 20px;
}

.notification-badge {
    margin-right: 20px;
    cursor: pointer;
}

.text-right {
    text-align: right;
}

.search-card {
    margin-bottom: 20px;
}

.tab-bar {
    margin-bottom: 20px;
}

.table-card {
    margin-bottom: 20px;
}

.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total {
    font-size: 14px;
    color: #606266;
}

.new-instruction {
    margin-left: 20px;
}

.instruction-content {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
}

.operation-records {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
}

.operation-area {
    padding: 15px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
}

.basic-info {
    padding: 15px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
}

.attachment-item {
    margin-bottom: 5px;
}

.alert-content {
    padding: 15px;
}

.alert-content h3 {
    margin-top: 0;
    color: #f56c6c;
}

.alert-info {
    margin-top: 15px;
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
}

.alert-info p {
    margin: 5px 0;
}
</style>